<template>
   <div class="markdown-body" v-html="md.render(content)"></div>
 
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import 'highlight.js/scss/github.scss';

export default defineComponent({
  name: 'MarkdownRenderer',
  props: {
    content: {
      type: String,
      required: true,
      default: '',
    },
  },
  setup() {
    const md = MarkdownIt({
   
      highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return (
              '<pre class="hljs "><code class="hljs-code">' +
              hljs.highlight(str, { language: lang, ignoreIllegals: true })
                .value +
              '</code></pre>'
            );
          } catch (__) {}
        }

        return (
          '<pre class="hljs"><code class="hljs-code">' +
          md.utils.escapeHtml(str) +
          '</code></pre>'
        );
      },
    });

    return {
      md,
    };
  },
});
</script>

<style lang="scss" scoped>
.markdown-body {

  background: #fff;
  border-radius: 5px;
  font-family: Arial, sans-serif;
}

.markdown-body pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto; /* 使代码块可以水平滚动 */
  white-space: pre; /* 保持代码块内的空白字符 */
  word-break: break-all; /* 使长单词在必要时换行 */
}

.markdown-body code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
  white-space: pre-wrap; /* 保持代码块内的空白字符 */
  word-break: break-all; /* 使长单词在必要时换行 */
}



</style>
